<template>
  <div class="homepage">
    <div class="homepage_main">
      <v-card
        class="mx-auto"
        max-width="1280px"
        style="box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.05);"
      >
        <v-card-text>
          <div class="card_main">
            <span></span>
            <div style="font-size:14px">
              <v-chip class="ma-2">1</v-chip>复制淘口令 ① / ② ，打开手机淘宝领礼金
              <v-icon>mdi-chevron-right</v-icon>
              <v-chip class="ma-2">2</v-chip>选择以下任一商品购买
              <v-icon>mdi-chevron-right</v-icon>
              <v-chip class="ma-2">3</v-chip>打开手淘，用领取的礼金抵商品金额
              <div style="color:red;font-size:14px">（礼金每天只能领一次，天天可领，如领不到请换号操作；以下全为通用档品牌礼金，默认按5元计算。）</div>
            </div>
            <div class="state">首单礼金玩法说明>></div>
            <div class="isshow">
              <v-btn
                text
                small
                @click="ishowcourse = !ishowcourse"
                style="border-radius: 10px;border:1px solid #f0f0f0;"
              >
                <i
                  v-show="ishowcourse"
                  class="iconfont icon-up"
                  style="font-size:25px;color:#1976d2;"
                ></i>
                <i
                  v-show="!ishowcourse"
                  class="iconfont icon-down"
                  style="font-size:25px;color:#1976d2;"
                ></i>
              </v-btn>
            </div>
          </div>
          <v-expand-transition>
            <div v-show="ishowcourse">
              <v-divider></v-divider>
              <div class="getcourse">
                <div class="course_con" style="width:50%;">
                  <p>领品牌首单礼金</p>
                  <v-img
                    src="http://img.bc.haodanku.com/haodanku/1596520667"
                    aspect-ratio="1"
                    class="grey lighten-2"
                    width="400"
                    height="106"
                  ></v-img>
                  <div style="margin-top:12px;">
                    <v-btn
                      small
                      outlined
                      color="indigo"
                      style="margin-right:15px;"
                      @click="docopy('(B4o2ccBuiji)')"
                    >复制淘口令①</v-btn>
                    <v-btn small outlined color="indigo" @click="docopy('(ncOmccBub1v)')">复制淘口令②</v-btn>
                  </div>
                </div>
                <v-divider class="mx-4" inset vertical></v-divider>
                <div style="display:flex;justify-content:space-around;width:50%;">
                  <div class="course_con">
                    <p>图片教程</p>
                    <v-img
                      @click="opendialog(1)"
                      src="http://img.bc.haodanku.com/haodanku/1596520689"
                      aspect-ratio="1"
                      class="grey lighten-2"
                      style="cursor: pointer;"
                      width="228"
                      height="106"
                    ></v-img>
                    <div style="margin-top:12px;">
                      <v-btn small outlined color="indigo" @click="copy3">复制图片</v-btn>
                    </div>
                  </div>
                  <div class="course_con">
                    <p>视频教程</p>
                    <v-img
                      @click="opendialog(2)"
                      src="http://img.bc.haodanku.com/haodanku/1596520689"
                      aspect-ratio="1"
                      style=" cursor: pointer;"
                      class="grey lighten-2"
                      width="228"
                      height="106"
                    ></v-img>
                    <div style="margin-top:12px;">
                      <a
                        href="https://video-haodanku-com.cdn.fudaiapp.com/3YMFGz-lZxvmSH99SNqRz3mtU2s=/FgzkiT3i7Qtp-AROTdZQqaJf6zco?attname=15966095359830.mp4"
                        download="视频教程"
                      >
                        <v-btn small outlined color="indigo">下载视频</v-btn>
                      </a>
                    </div>
                  </div>
                  <div id="d1" style="position:absolute;top:0;right:4000px; z-index:-999"></div>
                </div>
              </div>
            </div>
          </v-expand-transition>
        </v-card-text>
      </v-card>
      <!-- 分类 -->
      <v-card
        class="mx-auto"
        max-width="1280px"
        style="box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.05);"
      >
        <v-card-text>
          <div class="classify">
            <span class="class_span">分类</span>
            <v-btn-toggle
              v-model="form.class_id"
              mandatory
              tile
              color="#5E82FE"
              group
              @change="classchange"
            >
              <v-btn small rounded :value="0">
                <span>全部</span>
              </v-btn>
              <v-btn rounded v-for="(item, index) in classlist" :key="index" :value="item.id">
                <span>{{ item.name }}</span>
              </v-btn>
            </v-btn-toggle>
          </div>
          <v-divider></v-divider>
          <div style="display:flex;justify-content:space-between;align-items:center;">
            <div class="classify">
              <span class="class_span">筛选</span>
              <!-- <v-container fluid>
              <v-checkbox
                v-model="selected"
                label="官方旗舰店"
                value="官方旗舰店"
                :ripple="false"
              ></v-checkbox>
              <v-checkbox
                v-model="selected"
                label="首单礼金精选"
                value="首单礼金精选"
                :ripple="false"
              ></v-checkbox>
              </v-container>-->
              <span class="class_span" style="width:102px">佣金比例≥</span>
              <div class="cmsbox">
                <v-text-field
                  style="width:90px;"
                  v-model.trim="form.commission_bl_start"
                  filled
                  rounded
                  dense
                  hide-details
                  height="30px"
                ></v-text-field>% ~
                <v-text-field
                  style="width:90px"
                  v-model.trim="form.commission_bl_stop"
                  filled
                  rounded
                  dense
                  hide-details
                  height="30px"
                ></v-text-field>%
              </div>
              <span class="class_span">价格</span>
              <div class="cmsbox">
                <v-text-field
                  style="width:90px;"
                  v-model.trim="form.goods_price_start"
                  filled
                  rounded
                  dense
                  hide-details
                  height="30px"
                ></v-text-field>~
                <v-text-field
                  style="width:90px"
                  v-model.trim="form.goods_price_stop"
                  filled
                  rounded
                  dense
                  hide-details
                  height="30px"
                ></v-text-field>
              </div>
            </div>
            <v-btn color="#5E82FE" style="color: white;float:right" @click="doSearch">查询</v-btn>
          </div>
          <!-- <v-divider></v-divider>
          <div class="disbet" style="padding:8px 0">
            <div class="disstart">
              <span class="class_span">
                首单礼金玩法
              </span>
              <v-radio-group v-model="tljradio" row>
                <v-radio label="0元免单" value="0"></v-radio>
                <v-radio label="低价购" value="1"></v-radio>
              </v-radio-group>
            </div>
            <v-btn
              color="#5E82FE"
              style="color: white;"
              @click="tgdialog = true"
              >查询</v-btn
            >
          </div>-->
        </v-card-text>
      </v-card>
      <!-- 排序 -->
      <div class="desc">
        <div style="display:flex;justify-content:flex-start;align-items:center;">
          <v-btn-toggle v-model="form.sort" borderless color="#5E82FE" @change="sortchange">
            <v-btn small :value="1">
              <span class="hidden-sm-and-down">上架时间</span>
            </v-btn>
            <v-btn small :value="2">
              <span class="hidden-sm-and-down">日销量</span>
            </v-btn>
            <v-btn small :value="3">
              <span class="hidden-sm-and-down">佣金比例</span>
            </v-btn>
            <v-btn small :value="4">
              <span class="hidden-sm-and-down">商品价格</span>
            </v-btn>
          </v-btn-toggle>
          <div>
            <v-btn small text @click="(flag = !flag), doSearch()">
              <i
                class="iconfont icon-desc"
                :style="{
                  fontSize: '18px',
                  transform: 'rotate(180deg)',
                  color: flag == false ? '#09f' : 'gray'
                }"
              ></i>
              <i
                class="iconfont icon-desc"
                :style="{
                  fontSize: '18px',
                  color: flag == true ? '#09f' : 'gray'
                }"
              ></i>
            </v-btn>
          </div>
        </div>
        <div class="search_top">
          <v-text-field
            style="width:400px;border-top-right-radius: 0;border-bottom-right-radius: 0;"
            v-model.trim="form.search"
            label="请输入搜索内容!"
            clearable
            single-line
            outlined
            dense
            hide-details
            small
          >
            <!-- <div slot="prepend-inner">
              <i class="iconfont icon-search" style="margin-right:5px"></i>
            </div> -->
          </v-text-field>
          <v-btn
            color="primary"
            @click="doSearch"
            depressed
            width="100px"
            height="41px"
            style="border-top-left-radius: 0;border-bottom-left-radius: 0;padding:0 8px;background: linear-gradient(270deg,#599efd,#4d74ff);margin-top:3px"
          >搜 索</v-btn>
        </div>
        <v-pagination v-model="form.page" :length="0" circle></v-pagination>
      </div>
      <div class="goodsbox">
        <div class="goods_row">
          <div v-for="(item, index) in goodsList" :key="index" class="goods_col">
            <v-hover v-slot:default="{ hover }">
              <v-card class="mx-auto" color="white lighten-4" max-width="600" light>
                <v-img :src="item.goods_img" :lazy-src="item.goods_img" aspect-ratio="1">
                  <template v-slot:placeholder>
                    <v-row class="fill-height ma-0" align="center" justify="center">
                      <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                    </v-row>
                  </template>
                  <!-- <v-expand-transition> -->
                  <div
                    v-if="hover"
                    class="d-flex  v-card--reveal display-1 white--text"
                    style="width:100%;height: 100%;"
                  >
                    <!-- <span
                        class="orange"
                        style="position:absolute;top:0;right:0;"
                      >
                        $14.99</span
                      > -->
                    <span class="hover_btn">
                      <span
                        v-show="!item.joined"
                        class="blue b1"
                        @click="addCollect(item, index)"
                        >加入推广</span
                      >
                      <span
                        v-show="item.joined"
                        class="blue b1"
                        @click="delCollect(item, index)"
                        >移出推广</span
                      >
                      <v-divider vertical></v-divider>
                      <v-tooltip right>
                        <template v-slot:activator="{ on, attrs }">
                          <span
                            class="blue b2"
                            v-bind="attrs"
                            v-on="on"
                            @mousedown="handleOk2('goodsli' + index)"
                            @click="handleOk('goodsli' + index)"
                            >复制文案</span
                          >
                          <!-- @click="docopy(item.friend_text)" -->
                        </template>
                        <div
                          :id="'goodsli' + index"
                          style="text-align:left;width:300px;overflow:hidden"
                        >
                          <img
                            :src="item.goods_img"
                            style="width:120px"
                          /><br />
                          <i>{{ item.goods_title }}</i
                          ><br />
                          原价{{ item.price }}元，券后价【{{
                            item.after_price
                          }}元】<br />
                          领券：{{ item.coupon_url }}<br />
                          下单：{{ item.goods_url }}<br />
                          {{ item.friend_text }}
                        </div>
                      </v-tooltip>
                    </span>
                  </div>
                  <!-- </v-expand-transition> -->
                </v-img>
                <v-card-text class="pt-6" style="position: relative;">
                  <div class="text_box">
                    <div class="bar">抵扣价{{ item.zk_price }}</div>
                  </div>
                  <a
                    :href="item.goods_url"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <p class="titler" style="font-size:18px;">
                      {{ item.goods_title }}
                    </p>
                  </a>
                  <div class="price_box">
                    <div class="price_left">
                      <span style="font-size: 20px;">￥{{ item.after_price }}</span>
                      <span
                        style="color: #999;font-size: 12px;text-decoration: line-through;"
                      >￥{{ item.price }}</span>
                    </div>
                    <a
                      :href="item.coupon_url"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <div class="price_right">
                        <span>劵</span>
                        <em>￥{{ item.coupon_money }}</em>
                      </div>
                    </a>
                  </div>

                  <div class="sales">
                    <div>
                      <div style="color:#ff4c42">
                        {{ item.month_num }}
                      </div>
                      <div>
                        月销量
                      </div>
                    </div>
                    <div>
                      <div style="color:#ff4c42">{{ item.commission_bl }}%</div>
                      <div>
                        营销
                      </div>
                    </div>
                    <div>
                      <div style="color:#ff4c42">
                        {{ (item.price * item.commission_bl).toFixed(2) }}
                      </div>
                      <div>
                        佣金
                      </div>
                    </div>
                  </div>
                  <v-progress-linear
                    :value="(item.coupon_surplus / item.coupon_num) * 100"
                    color="#ff4b42"
                  ></v-progress-linear>
                  <v-expand-transition>
                    <div v-if="hover" class="shop">
                      <div class="shop_p">
                        <span>店铺:</span>
                        {{ item.shop_name }}
                      </div>
                      <div class="shop_p">
                        <span>来源:</span>
                        {{ item.user_name }}
                      </div>
                    </div>
                  </v-expand-transition>
                </v-card-text>
              </v-card>
            </v-hover>
          </div>
        </div>
        <div class="text-center" style="padding-top:15px;">
          <v-pagination
            @input="pageChange"
            v-model="form.page"
            :length="maxpage"
            :total-visible="7"
            color="#4F79FF"
          ></v-pagination>
        </div>
      </div>
      <v-dialog v-model="dialog" scrollable max-width="550">
        <v-card>
          <v-card-title class="headline">
            {{
            isimg ? "图片教程" : "视频教程"
            }}
          </v-card-title>
          <v-card-text style="height: 725px;">
            <div ref="foo">
              <img
                id="imgs"
                v-if="isimg"
                src="//img.letuilm.com/2020/08/16dec02020082216071894859.png"
                alt
                srcset
                style="width:100%;height:100%"
              />
              <video
                v-else
                src="//img.letuilm.com/2020/08/f7ae5f202008221606499299.mp4"
                autoplay="autoplay"
                controls="controls"
              ></video>
            </div>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <div v-if="isimg">
              <v-btn color="blue darken-3" text @click.native="copy2" @click="copy">复制图片</v-btn>
              <v-btn color="green darken-1" text @click="downimg">下载图片</v-btn>
            </div>
            <div v-else>
              <a
                href="https://video-haodanku-com.cdn.fudaiapp.com/3YMFGz-lZxvmSH99SNqRz3mtU2s=/FgzkiT3i7Qtp-AROTdZQqaJf6zco?attname=15966095359830.mp4"
                download="视频教程"
              >
                <v-btn color="green darken-1" text>下载视频</v-btn>
              </a>
            </div>
          </v-card-actions>
        </v-card>
      </v-dialog>
      <v-dialog v-model="tgdialog" scrollable max-width="700">
        <v-card light color="white">
          <v-card-title class="headline">
            {{
            "文案(" + collectList.length + ")个"
            }}
          </v-card-title>
          <v-card-text style="height: 725px;">
            <div class="collect_box" id="collectbox">
              <div v-if="collectList.length > 0">
                <div id="collectall">
                  <div v-for="(item, index) in collectList" :key="index">
                    <div class="collect_main" ref="collect">
                      <img
                        :src="item.img"
                        alt=""
                        srcset=""
                        style="width:150px;height:150px;margin-top: 20px;"
                      />
                      <v-textarea
                        v-model="item.info"
                        auto-grow
                        append-outer-icon="mdi-close"
                        rows="2"
                        @click:append-outer="delCollect(item)"
                        type="text"
                        row-height="5"
                      ></v-textarea>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>还没有加入的文案哦 (。・・)ノ</div>
            </div>
          </v-card-text>
          <v-card-actions>
            <v-btn color="blue darken-3" text @click="doclear">清空</v-btn>
            <v-btn
              color="green darken-1"
              text
              v-clipboard:copy="allstr"
              v-clipboard:success="copysuccess"
              v-clipboard:error="copyerror"
            >复制</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
    <!-- 侧边栏 -->
    <div class="sider">
      <div class="sidebar">
        <div class="siderbar_box">
          <div class="siderbar_item i1" @click="gobacktop">
            <div class="rool r1"></div>
          </div>
          <!-- <div class="siderbar_item i2" @click="shareshow = !shareshow">
            <div class="rool r2"></div>
            <div class="text t2">分享本站</div>
          </div>-->
          <div class="siderbar_item i3" @click="tgdialog = !tgdialog">
            <v-badge
              class="item"
              v-if="collectList.length > 0"
              color="red"
              :content="collectList.length"
            >
              <div class="rool r3"></div>
            </v-badge>
            <div v-else class="rool r3"></div>
            <div class="text t3">集合推广</div>
          </div>
          <div class="siderbar_item i4" @click="cashshow = !cashshow">
            <div class="rool r4"></div>
            <div class="text t1">礼金计算</div>
          </div>
        </div>

        <!-- <transition name="slide-fade"> </transition> -->
      </div>
      <!-- 分享本站 -->
      <!-- <el-dialog
        title=""
        :visible.sync="shareshow"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <el-input
            type="textarea"
            :autosize="{ minRows: 7, maxRows: 12 }"
            placeholder="请输入内容"
            v-model="shareinfo"
          >
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <div style="width:100%;text-align:center">
            <el-button
              v-clipboard:copy="shareinfo"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
              >复 制</el-button
            >
          </div>
        </span>
      </el-dialog>-->
      <!-- 礼金计算 -->
      <v-dialog v-model="cashshow" scrollable max-width="600">
        <v-card>
          <v-card-title class="headline">
            首单礼金佣金计算器
            <v-tooltip right max-width="650" z-index="999">
              <template v-slot:activator="{ on, attrs }">
                <i
                  class="iconfont icon-wenhao"
                  v-bind="attrs"
                  v-on="on"
                  style="font-size:18px;padding:5px;"
                ></i>
              </template>
              <div>
                <p style="padding:10px 0 0 0;color:#333">
                  以 10 元券后，5 元首单礼金，5 元首单礼金，80% 佣金比例，100
                  订单，为例：
                </p>
                <v-simple-table :dense="dense" :fixed-header="fixedHeader" :height="height">
                  <template v-slot:default>
                    <tbody>
                      <tr v-for="item in desserts" :key="item.name">
                        <td>{{ item.title }}</td>
                        <td>{{ item.explain }}</td>
                        <td>{{ item.num }}</td>
                      </tr>
                    </tbody>
                  </template>
                </v-simple-table>
              </div>
            </v-tooltip>
          </v-card-title>
          <v-card-text style="height:520px;">
            <div class="counter_box">
              <v-row>
                <v-col cols="6">
                  <div class="counter_col">
                    <p>卷后价</p>
                    <v-text-field
                      v-model.number="afterprice"
                      single-line
                      suffix="元"
                      hide-details
                      placeholder="请输入卷后价"
                    ></v-text-field>
                  </div>
                </v-col>
                <v-col cols="6">
                  <div class="counter_col">
                    <p>首单礼金</p>
                    <v-text-field
                      v-model.number="firstorder"
                      single-line
                      suffix="元"
                      hide-details
                      placeholder="请输入首单礼金"
                    ></v-text-field>
                  </div>
                </v-col>
                <v-col cols="6">
                  <div class="counter_col">
                    <p>佣金比例</p>
                    <v-text-field
                      v-model.number="commratio"
                      single-line
                      suffix="元"
                      hide-details
                      placeholder="请输入佣金比例"
                    ></v-text-field>
                  </div>
                </v-col>
                <v-col cols="6">
                  <div class="counter_col">
                    <p>首单礼金面额</p>
                    <v-text-field
                      v-model.number="cashprice"
                      single-line
                      suffix="元"
                      hide-details
                      placeholder="请输入首单礼金面额"
                    ></v-text-field>
                  </div>
                </v-col>
                <v-col cols="6">
                  <div class="counter_col">
                    <p>订单数(礼金总数)</p>
                    <v-text-field
                      v-model.number="ordernum"
                      single-line
                      suffix="个"
                      hide-details
                      placeholder="请输入订单数"
                    ></v-text-field>
                  </div>
                </v-col>
              </v-row>
              <div class="result_box">
                <div class="result_left">
                  <p class="res_p" style="margin-top:15px">
                    单笔买家实付:
                    <span style="color:red">{{ afterprice - firstorder - cashprice }}元</span>
                  </p>
                  <p class="res_p">
                    单笔到手佣金:
                    <span style="color:red">
                      {{
                      (afterprice * (commratio / 100) * 0.9).toFixed(2)
                      }}元
                    </span>
                  </p>
                  <p class="res_p">
                    单笔订单所得:
                    <span style="color:red">
                      {{
                      (
                      afterprice * (commratio / 100) * 0.9 -
                      cashprice
                      ).toFixed(2)
                      }}元
                    </span>
                  </p>
                  <p class="res_p">
                    总到手佣金:
                    <span style="color:red">
                      {{
                      (
                      afterprice *
                      (commratio / 100) *
                      0.9 *
                      ordernum
                      ).toFixed(2)
                      }}元
                    </span>
                  </p>
                  <p class="res_p">
                    总支出礼金:
                    <span style="color:red">{{ cashprice * ordernum }}元</span>
                  </p>
                  <p class="res_p">
                    总订单所得:
                    <span style="color:red">
                      {{
                      (
                      (afterprice * (commratio / 100) * 0.9 - cashprice) *
                      ordernum
                      ).toFixed(2)
                      }}元
                    </span>
                  </p>
                </div>
                <div class="result_right">
                  <v-btn color="#ea0035" width="260px" style="color:white;">计算所得</v-btn>
                  <div class="disbet" style="justify-content:space-around;margin:30px 0;">
                    <v-btn color="#ea0035" style="color:white;">计算保本</v-btn>
                    <v-btn color="#ea0035" style="color:white;">计算免单</v-btn>
                  </div>
                  <div class="disbet">
                    <v-text-field
                      v-model.number="afterprice"
                      single-line
                      suffix="元"
                      hide-details
                      placeholder="请输入金额"
                      style="width:150px;margin-right:10px;"
                    ></v-text-field>
                    <v-btn color="#ea0035" style="color:white;">计算免单</v-btn>
                  </div>
                </div>
              </div>
            </div>
          </v-card-text>
          <!-- <v-card-actions>
            <v-btn @click="cashshow = false">取 消</v-btn>
            <v-btn color="primary" @click="cashshow = false">确 定</v-btn>
          </v-card-actions>-->
        </v-card>
      </v-dialog>
    </div>
  </div>
</template>

<script>
import { getClassInfo, getGoodsList, getGoodsType } from "@/api/home.js";
import Vue from "vue";
export default {
  name: "homepage",
  data() {
    return {
      flag: false,
      dense: false,
      fixedHeader: false,
      height: 300,
      desserts: [
        {
          title: "单笔买家实付",
          explain: "券后价 - 首单礼金 - 首单礼金",
          num: "10 - 5 - 5 = 0"
        },
        {
          title: "单笔到手佣金",
          explain: "券后价 * 佣金比例 * 90%",
          num: "10 * 80% * 90% = 7.2"
        },
        {
          title: "单笔订单所得",
          explain: "单笔到手佣金 - 首单礼金面额",
          num: "7.2 - 5 = 2.2"
        },
        {
          title: "总到手佣金",
          explain: "单笔到手佣金 * 订单数",
          num: "7.2 * 100 = 720"
        },
        {
          title: "总支出礼金",
          explain: "首单礼金面额 * 订单数",
          num: "5 * 100 = 500"
        },
        {
          title: "总订单所得",
          explain: "单笔订单所得 * 订单数",
          num: "2.2 * 100 = 220"
        }
      ],
      page: 1,
      afterprice: "", //卷后价
      firstorder: "", //首单礼金
      commratio: "", //佣金比例
      cashprice: "", //首单礼金面额
      ordernum: "", //订单数
      tgdialog: false,
      cashshow: false,
      isimg: true,
      dialog: false,
      ishowcourse: true,
      classlist: [
        // {
        //   name: "居家",
        //   id: 1
        // }
      ],
      selected: ["John"],
      tljradio: null,
      sort: "",
      goodsList: [
        // {
        //   id: 5, //自增id
        //   item_id: "619603738395", //商品id
        //   goods_title: "商品标题", //商品标题
        //   tg_title: "推广标题", //推广标题
        //   goods_img: "https://cdn.vuetifyjs.com/images/cards/kitchen.png", //商品图片
        //   coupon_url:
        //     "https://uland.taobao.com/quan/detail?sellerId=725677994&activityId=c8b0cdb9199d413ea6ad3ca598098b22", //优惠卷链接
        //   coupon_num: 111, //优惠卷总量
        //   coupon_surplus: 1, //优惠卷剩余数量
        //   price: "1222", //商品原价
        //   after_price: "23.00", //商品卷后价
        //   zk_price: "1.00", //商品折扣价
        //   goods_type: 2, // 商品类型
        //   commission_bl: "1", //佣金比例
        //   month_num: 1, //月销量
        //   service: "0.1", //服务费比例
        //   coupon_money: "33", //劵面额
        //   shop_name: "33", //店铺名称
        //   goods_url: "33", //商品链接
        //   friend_text: "朋友圈文案", //朋友圈文案
        //   status: 3, //商品状态 状态 1=审核中  2待审核，3活动中，4已暂停，5已下架
        //   user_name: "123456789" //用户昵称
        // }
      ],
      collectinfo: "",
      collectList: [],
      maxpage: 0,
      goodstype: 0,
      form: {
        class_id: 0,
        commission_bl_start: "",
        commission_bl_stop: "",
        goods_price_start: "",
        goods_price_stop: "",
        search: "",
        page: 1,
        pagesize: 20,
        sort: 1,
        desc: 1
      },
      allstr: ""
    };
  },

  computed: {},
  created() {
    this.getClassInfo();
    this.getGoodsList();
    this.getGoodsType();
  },
  mounted() {},
  methods: {
    // 获取商品类型
    getGoodsType() {
      getGoodsType()
        .then(res => {
          if (res.code === 200) {
            this.goodstype = res.data[0].value;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    pageChange() {
      console.log(this.form.page);
      this.getGoodsList();
    },
    // 获取商品列表
    getGoodsList() {
      getGoodsList(this.form)
        .then(res => {
          if (res.code === 200) {
            console.log("返回", res);
            this.form.page = parseInt(res.data.page);
            this.maxpage = parseInt(res.data.max_page);
            this.goodsList = res.data.data;
            for (let i in this.goodsList) {
              this.goodsList[i].joined = false;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 获取分类
    getClassInfo() {
      getClassInfo()
        .then(res => {
          if (res.code === 200) {
            // console.log("分类返回", res);
            this.classlist = res.data;
            // this.$message({
            //   type: "success",
            //   message: "获取成功1"
            // });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //返回顶部
    gobacktop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 80;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 12);
    },
    delCollect(item) {
      // console.log("移除", item);
      var arr = this.goodsList;
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].id == item.id) {
          // console.log("i", i);
          arr[i].joined = false;
          Vue.set(this.goodsList, i, arr[i]);
        }
      }
      for (let j = 0; j < this.collectList.length; j++) {
        if (this.collectList[j].id == item.id) {
          this.collectList.splice(j, 1);
          // console.log(this.collectList);
        }
      }
      this.allstr = "";
      for (let i = 0; i < this.collectList.length; i++) {
        this.allstr += this.collectList[i].info + "\n";
      }
    },
    addCollect(item) {
      // console.log("加入", item);
      var arr = this.goodsList;
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].id == item.id) {
          arr[i].joined = true;
          Vue.set(this.goodsList, i, arr[i]);
        }
      }
      var str2 =
        item.goods_title +
        "\n" +
        "原价:" +
        item.price +
        "元," +
        "券后价:【" +
        item.after_price +
        "元】" +
        "\n" +
        "领劵:" +
        item.coupon_url +
        "\n" +
        "抢购:" +
        item.goods_url;
      var obj = {
        id: item.id,
        img: item.goods_img,
        info: str2
      };
      // obj.info = str;
      this.collectList.push(obj);
      this.allstr = "";
      for (let i = 0; i < this.collectList.length; i++) {
        this.allstr += this.collectList[i].info + "\n";
      }
    },
    copysuccess() {
      this.$message({
        type: "success",
        message: "复制成功!"
      });
    },
    copyerror() {
      this.$message({
        type: "error",
        message: "复制失败!"
      });
    },
    doclear() {
      this.collectList = [];
      var arr = this.goodsList;
      for (var i = 0; i < arr.length; i++) {
        arr[i].joined = false;
        Vue.set(this.goodsList, i, arr[i]);
      }
    },
    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "img"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
    },
    downimg() {
      this.downloadIamge(
        "http://img.letuilm.com/2020/08/16dec02020082216071894859.png",
        "图片教程.png"
      );
    },
    handleOk2(val) {
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection();
        const range = document.createRange();
        // console.log(document.getElementById(val));
        range.selectNode(document.getElementById(val)); //传入dom
        selection.addRange(range);
        document.execCommand("copy");
        selection.removeAllRanges();
      });
    },
    handleOk(val) {
      // console.log(val)
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection();
        const range = document.createRange();
        // console.log(document.getElementById(val))
        range.selectNode(document.getElementById(val)); //传入dom
        selection.addRange(range);
        document.execCommand("copy");
        this.$message({
          type: "success",
          message: "复制成功!"
        });
        selection.removeAllRanges();
      });
    },
    copy2() {
      const selection = window.getSelection();
      const range = document.createRange();
      range.selectNode(this.$refs.foo); //传入dom
      selection.addRange(range);
      document.execCommand("copy"); //copy是复制
      selection.removeAllRanges(); // 清除缓存;
    },
    copy() {
      //nextTick,当前dom渲染完毕的回调
      console.log("foo", this.$refs.foo); //打印获取的dom
      const selection = window.getSelection();
      const range = document.createRange();
      range.selectNode(this.$refs.foo); //传入dom
      selection.addRange(range);
      document.execCommand("copy"); //copy是复制
      this.$message({
        type: "success",
        message: "复制成功!"
      });
      selection.removeAllRanges(); // 清除缓存;
    },
    copy3() {
      //nextTick,当前dom渲染完毕的回调
      var d1 = document.getElementById("d1");
      var img = document.createElement("img");
      img.src = "//img.letuilm.com/2020/08/16dec02020082216071894859.png";
      d1.appendChild(img);
      const selection = window.getSelection();
      selection.removeAllRanges(); // 清除缓存;
      const range = document.createRange();
      range.selectNode(d1); //传入dom
      selection.addRange(range);
      document.execCommand("copy"); //copy是复制
      selection.removeAllRanges(); // 清除缓存;
      d1.innerHTML = "";
      this.$message({
        type: "success",
        message: "复制成功!"
      });
    },
    opendialog(val) {
      if (val == 1) {
        this.isimg = true;
      } else {
        this.isimg = false;
      }
      this.dialog = true;
    },
    docopy(val) {
      var that = this;
      this.$copyText(val).then(
        function(e) {
          console.log(e);
          that.$message({
            type: "success",
            message: "复制成功!"
          });
        },
        function() {
          that.$message({
            type: "error",
            message: "复制失败!"
          });
        }
      );
    },
    doSearch() {
      console.log(this.form);
      if (this.flag == false) {
        this.form.desc = 1;
      } else {
        this.form.desc = 2;
      }
      this.getGoodsList();
    },
    sortchange() {
      console.log(this.form.sort);
      this.getGoodsList();
    },
    classchange() {
      console.log(this.form.class_id);
      this.getGoodsList();
    }
  }
};
</script>
<style>
.v-tooltip__content {
  background-color: #fff;
  color: #333;
  border: 1px solid gray;
}
</style>
<style lang="scss" scoped>
.disbet::v-deep {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .v-text-field {
    padding-top: 0;
  }
}
.disstart::v-deep {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .v-input__control {
    height: 30px;
  }
  .v-input--radio-group {
    margin: 0;
  }
}
.sider {
  // position: relative;
  .sidebar {
    width: 80px;
    // height: 300px;
    // background-color: gray;
    position: fixed;
    top: 40%;
    right: 0;
    z-index: 100;
    .siderbar_box {
      .siderbar_item {
        position: relative;
        float: right;
        // margin-top: 15px;
        width: 48px;
        height: 48px;
        border-radius: 5px;
        border: 1px #d6d6d6 solid;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        cursor: pointer;
        transition: all 300ms ease;
        .rool {
          background: url("~@/assets/imgs/rtool.png");
          width: 48px;
          height: 48px;
          // transition: all 300ms ease;
        }
      }
      .i1 {
        top: 0;
        .r1 {
          background-position: 0 -144px;
        }
      }
      .i1:hover {
        background: linear-gradient(#856eff, #5982ff);
        .r1 {
          background-position: 48px -144px;
        }
      }
      .i2 {
        top: 10px;
        .r2 {
          background-position: 0 0;
        }
      }
      .i2:hover {
        width: 120px;
        background: linear-gradient(#856eff, #5982ff);
        .r2 {
          background-position: 48px 0;
        }
      }
      .i3::v-deep {
        top: 20px;
        .item {
          display: block;
          .v-badge__badge.red {
            z-index: 22;
            bottom: calc(100% - 19px) !important;
            left: calc(100% - 19px) !important;
          }
        }
        .r3 {
          background-position: 0 -48px;
        }
      }
      .i3:hover {
        width: 120px;
        background: linear-gradient(#856eff, #5982ff);
        .r3 {
          background-position: 48px -48px;
        }
      }
      .i4 {
        top: 30px;
        .r4 {
          background-position: 0 -96px;
        }
      }
      .i4:hover {
        width: 120px;
        background: linear-gradient(#856eff, #5982ff);
        .r4 {
          background-position: 48px -96px;
        }
      }
    }
    .text {
      position: absolute;
      line-height: 48px;
      color: #fff;
      font-size: 14px;
      left: 48px;
    }
    .t1 {
      top: 0;
    }
    .t2 {
      top: 0;
    }
    .t3 {
      top: 0;
    }
    .dialogue {
      background-color: #fff;
      position: absolute;
      top: 0;
      right: 140px;
      clear: both;
      width: 200px;
      height: 80px;
      border-radius: 10px;
      // opacity: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      transition: all 200ms ease;
      span {
        display: inline-block;
      }
      .qqimg {
        width: 50px;
        height: 50px;
        background: url("~@/assets/imgs/qq.png") no-repeat center;
        background-size: 48px 48px;
        // background-position: -3px 7px;
        // border-radius: 50%;
      }
      .triangle {
        position: absolute;
        width: 12px;
        height: 10px;
        transform: rotateZ(45deg);
        background-color: #fff;
        top: 17px;
        right: -6px;
      }
    }
    .collect::v-deep {
      background-color: #fff;
      position: absolute;
      top: -150px;
      right: 140px;
      clear: both;
      width: 400px;
      height: 600px;
      border-radius: 10px;
      // opacity: 0;
      box-shadow: 0 0 10px #eee;
      transition: 0.3s;
      box-sizing: border-box;
      transition: all 200ms ease;
      .tabs {
        width: 100%;
        margin-top: 20px;
        .el-radio-group {
          overflow: hidden;
          .el-radio-button__inner {
            width: 150px;
            height: 35px;
            line-height: 27px;
            box-sizing: border-box;
            padding: 5px 10px;
            // color: #fff;
            border-radius: 40px;
          }
          .is-active {
            .el-radio-button__inner {
              background: linear-gradient(
                90deg,
                rgba(15, 121, 233, 1),
                rgba(107, 95, 254, 1),
                rgba(87, 148, 255, 1)
              );
              color: #fff;
            }
          }
        }
      }
      .collectbox {
        width: 98%;
        margin: 0 auto;
        .goods_top {
          // width: 980px;
          position: relative;
          display: flex;
          // justify-content: space-between;
          align-items: center;
          .rowBox {
            width: 95%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            max-height: 530px;
            overflow: hidden;
            overflow-y: visible;
            .hover_box {
              margin-top: 20px;
              position: relative;
              width: 400px;
              // height: 100px;
              border-radius: 15px;
              overflow: hidden;
              .elimg {
                width: 130px;
                height: 130px;
                border-radius: 15px;
                overflow: hidden;
              }
              .top_main {
                // width: 947px;
                overflow: hidden;
                background-color: #fff;
                // height: 220px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .top_right {
                  padding: 6px;
                  width: 220px;
                  margin: 0 auto;

                  .top_title {
                    // width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin: 3px auto;
                    cursor: pointer;
                    a {
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      font-size: 14px;
                      text-decoration: none;
                    }
                  }

                  .top_data {
                    height: 70px;
                    font-size: 13px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    p {
                      margin-top: 0 !important;
                      margin-bottom: 0 !important;
                    }
                    p:first-child {
                      color: #333;
                      font-size: 16px;
                      font-weight: bold;
                    }
                  }
                  .bot_img {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    .boticon {
                      width: 20px;
                      height: 20px;
                      cursor: pointer;
                      background: url("~@/assets/imgs/mico.png");
                    }
                    .btn1 {
                      background-position: 0px 80px;
                    }
                    .btn2 {
                      background-position: 0px 60px;
                    }
                    .btn3 {
                      background-position: 0px 40px;
                    }
                    .btn3:hover {
                      background-position: 20px 40px;
                    }
                  }
                }
              }
            }
            // .hover_box:hover {
            // }
          }
        }
      }
    }
  }
}
.counter_box {
  text-align: left;
  .counter_col::v-deep {
    p {
      margin-bottom: 0px;
    }
    .v-text-field {
      padding-top: 0px;
    }
  }
  .result_box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .result_left {
      .res_p {
        margin-top: 5px;
      }
    }
    .result_right {
      text-align: center;
    }
  }
}
.homepage {
  width: 100%;
  background: url("http://img.bc.haodanku.com/haodanku/1596508056") no-repeat
    top;
  background-color: #f8f9ff;
  .homepage_main {
    padding: 150px 0 100px 0;
    .mx-auto {
      margin-top: 25px;
      border-radius: 12px;
      box-shadow: 0 0 black;
      // box-shadow: 0 4px 12px 2px rgba(0,0,0,.1);
      //   overflow: hidden;
      .card_main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .state {
          width: 148px;
          height: 28px;
          line-height: 33px;
          background: linear-gradient(270deg, #ff8d65, #fb3d3b);
          border-radius: 14px 0 0 14px;
          color: #fff;
          font-size: 12px;
        }
        .isshow {
          position: absolute;
          bottom: -12px;
          left: calc(50% - 27px);
          background-color: #fff;
          z-index: 99;
        }
      }
      .getcourse {
        // height: 70px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .course_con {
          text-align: center;
          p {
            font-weight: 700;
            font-size: 15px;
            color: #333;
            margin-top: 15px;
          }
          .grey {
            margin: 0 auto;
            border-radius: 8px;
          }
        }
      }
      .class_span {
        display: inline-block;
        color: #333;
        width: 100px;
        padding: 0 10px;
      }
      .classify::v-deep {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 8px 0;
        .cmsbox {
          display: inline-block;
          display: flex;
          align-items: center;
          .v-input__slot {
            min-height: 30px;
            padding: 0 14px;
          }
        }
        .v-item-group {
          .v-btn {
            border-radius: 25px;
            height: 30px;
          }
        }
        .container {
          display: flex;
          padding: 12px 6px;
          width: 240px;
          margin: 0;
          .v-messages {
            display: none;
          }
          .v-input__slot {
            padding: 6px 10px;
            margin: 0;
            border: 1px solid gray;
            border-radius: 5px;
          }
          .v-input--checkbox {
            margin-right: 10px;
          }
        }
        .v-input--selection-controls {
          margin: 0;
        }
        .v-input--selection-controls__input {
          width: 12px;
          height: 12px;
          position: absolute;
          bottom: -1px;
          right: -8px;
          .v-icon.v-icon {
            width: 12px;
            font-size: 15px;
          }
        }
      }
    }
    .desc {
      width: 1280px;
      margin: 15px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .search_top::v-deep {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .v-input__control {
          height: 35px;
        }
        .v-input__prepend-inner {
          margin-top: 12px;
        }
      }
    }
    .goodsbox {
      width: 1280px;
      margin: 0 auto;
      .v-card--reveal {
        align-items: center;
        bottom: 0;
        justify-content: center;
        // opacity: 0.8;
        position: absolute;
        width: 100%;
      }
      .goods_row {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: flex-start;
        .goods_col {
          width: 225px;
          margin: 0 15px;
          .mx-auto {
            box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.005);
            transition: border-radius 0s, transform 0.2s ease-in-out,
              box-shadow 0.2s ease-in-out, z-index 0.2s ease-in-out;
            box-sizing: border-box;
          }
          // height: 482px;

          .pt-6 {
            background-color: #fff;
            font-size: 12px;
            .text_box {
              width: 199px;
              height: 45px;
              margin: 0 auto;
              color: #fff;
              text-align: center;
              line-height: 45px;
              font-size: 16px;
              background: url("~@/assets/imgs/yugu.png") no-repeat center;
            }
            .titler {
              color: #333;
              font-weight: 500;
              font-size: 14px;
              text-align: center;
              padding: 0 10px;
              margin-top: 10px;
              cursor: pointer;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .price_box {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 10px;
              height: 58px;
              border-bottom: 1px dashed #e6e6e6;
              .price_left {
                display: flex;
                align-items: baseline;
                color: #4e76ff;
                font-size: 12px;
                font-weight: 700;
              }
              .price_right {
                float: left;
                font-size: 0;
                cursor: pointer;
                margin-top: 1px;
                span {
                  display: inline-block;
                  padding: 0 3px;
                  background: #fd7100;
                  color: #fff;
                  font-size: 12px;
                  background: linear-gradient(
                    0deg,
                    rgba(255, 75, 66, 1),
                    rgba(255, 117, 60, 1)
                  );
                  height: 20px;
                  vertical-align: middle;
                  line-height: 20px;
                }
                em {
                  display: inline-block;
                  padding: 0 2px;
                  border: 1px solid #fd7100;
                  color: #fd7100;
                  font-size: 12px;
                  height: 20px;
                  vertical-align: middle;
                  line-height: 18px;
                }
              }
            }
            .sales {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 8px 0;
            }
            p {
              margin: 0;
            }
            .profit_and_loss {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 8px 0;
            }
            .shop {
              text-align: left;
              position: absolute;
              left: 0;
              z-index: 2;
              background-color: #fff;
              width: 225px;
              border-radius: 12px;
              border-top-left-radius: 0;
              border-top-right-radius: 0;
              box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.1);
              border-top: none;
              .shop_p {
                padding: 5px 8px 5px 10px;
              }
            }
          }
          .hover_btn::v-deep {
            width: 225px;
            font-size: 13px;
            color: white;
            position: absolute;
            bottom: 0px;
            left: 0;
            display: flex;
            .v-divider--vertical {
              background-color: #8daef566;
            }
            .blue {
              // padding: 8px 29px;
              display: inline-block;
              width: 50%;
              cursor: pointer;
              background-color: #7290ff !important;
              border-color: #7290ff !important;
            }
            .blue:hover {
              background: #3263eccc !important;
            }
            .b1 {
              // border-top-left-radius: 10px;
            }
            .b2 {
              // border-top-right-radius: 10px;
            }
          }
        }
        .goods_col:hover {
          .mx-auto {
            transform: translateY(-4px);
            box-shadow: 0 4px 12px 2px rgba(0, 0, 0, 0.1);
            z-index: 10;
          }
        }
      }
    }
  }
}
.collect_box {
  .collect_main::v-deep {
    display: flex;
    // justify-content: flex-start;
    align-content: center;
    padding: 8px 0;
    .v-text-field {
      padding-top: 0px;
      margin-top: 0px;
    }
  }
}
</style>
